<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../mixins/style/base.css" />
    <link rel="stylesheet" href="../mixins/style/normalize.css" />

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


    <style>
        .container {
            overflow: hidden;
            position: relative;
            width: calc(100% - 20px);
            margin: 10px auto;
        }
        
        .search-wrap .el-input,
        .search-wrap .el-select {
            vertical-align: middle;
        }
        
        .el-table__expanded-cell[class*=cell] {
            padding: 0px;
            padding-left: 48px;
            margin: -1px;
        }
    </style>
</head>

<body>

    <div class="container" id="app">



        <el-row class="mt_10 search-wrap">
            <el-col :span="24">
                <el-button-group>
                    <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button size="small" type="primary" icon="el-icon-edit">编辑</el-button>
                    <el-button size="small" type="primary" icon="el-icon-add">新增</el-button>
                    <el-button size="small" type="primary" icon="el-icon-delete">删除</el-button>
                </el-button-group>
                <el-input size="small" class="inline w150" v-model="input" placeholder="姓名"></el-input>
                <el-date-picker size="small" type="date" class="inline w150" v-model="input" placeholder="姓名"></el-date-picker>
                <el-select size="small" v-model="type" placeholder="类型">
                    <el-option v-for="item in typeArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>

        </el-row>

        <div class="mt_10">

        </div>

        <el-row class="mt_10">
            <el-col :span="24">

                <el-table class="el-table--mini" show-header="false" hover border highlight-current-row :data="tableData" style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                       
                                <el-table class="el-table--mini" show-header="false" empty-text="暂无数据" hover border highlight-current-row :data="props.children" style="width: 100%">      
                                </el-table-column>
                                <el-table-column label="商品 ID" prop="id">
                                </el-table-column>
                                <el-table-column label="商品名称" prop="name">
                                </el-table-column>
                                <el-table-column label="描述" prop="desc">
                                </el-table-column>
                            </el-table>


                         </template>
                    </el-table-column>
                    <el-table-column label="商品 ID" prop="id">
                    </el-table-column>
                    <el-table-column label="商品名称" prop="name">
                    </el-table-column>
                    <el-table-column label="描述" prop="desc">
                    </el-table-column>
                </el-table>


            </el-col>
        </el-row>

        <el-row class="mt_10">
            <el-col span="24">

                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>


            </el-col>
        </el-row>






    </div>


    <script src="http://localhost:8180//git-my/training-cms/src/lib/jquery.js"></script>
    <script src="http://localhost:8180//git-my/training-cms/src/lib/sea-all.js"></script>

    <script src="http://localhost:8180//git-my/training-cms/src/lib/vue.js"></script>
    <script src="http://localhost:8180//git-my/training-cms/src/lib/vue-router.js"></script>

    <script src="http://localhost:8180//git-my/training-cms/src/page/boot.js"></script>
    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/lodash.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="http://localhost:8180//git-my/training-cms/src/lib/font-awesome/css/font-awesome.css">

    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- <script src="http://localhost:8180//git-my/training-cms/src/lib/elementui/index.js"></script>
    <script src="http://localhost:8180//git-my/training-cms/src/lib/elementui/zh-CN.js"></script> -->

    <script>
        $(function() {
            // inlineBlock 兼容safari
            function inlineBlockHack() {
                $('.inline-block-container').contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();
            }
            inlineBlockHack();
        });
    </script>

    <script>
        $(function() {
            seajs.use('page/list.js');
        })
    </script>



</body>